<template>
  <div class="title">
    <div class="title_top">告警统计</div>
    <a-spin :spinning="loading">
      <a-select v-model="queryParam.queryType" style="width: 120px;margin: 10px;float: right;" @change="changeType()">
        <a-select-option :value="0">
          周
        </a-select-option>
        <a-select-option :value="1">
          月
        </a-select-option>
        <a-select-option :value="2">
          年
        </a-select-option>
      </a-select>
      <div
        v-if="warningData && warningData.length > 0"
        class="echart"
        id="warnPieEcharts"
        :style="{ float: 'left', width: '100%', height: '250px' }"
      ></div>
      <a-empty v-else style="margin-top: 20px" />
    </a-spin>
  </div>
</template>

  <script>
import * as echarts from 'echarts'
import storage from 'store'
import { countWarningByTime } from '@/api/home/apl_correct_statistic.js'
import { findUserTree } from '@/api/base/ha_user'
import { APP_USER, APP_DEPT } from '@/store/mutation-types.js'
export default {
  name: 'RightBottom',
  data () {
    return {
      loading: false,
      warningData: [],
      queryParam: {
        queryType: 2,
        f_deptid: undefined
      },
      currentUser: storage.get(APP_USER), // 登录人信息
      currentDept: storage.get(APP_DEPT) // 登录人部门
    }
  },
  created () {
    this.getCountWarningByTime() // 日历组件程序
  },
  methods: {
    changeType (value) {
      // this.queryParam.queryType = value
      this.getCountWarningByTime()
    },
    async getCountWarningByTime () {
      this.loading = true
      const res1 = await findUserTree('3601001000', { type: 1, isuser: false })
      this.loading = false
      if (res1.code == 0 && res1.data) {
        this.parentId = []
        this.recursionDeptid(this.parentId, this.currentDept.id, res1.data)
        this.queryParam.f_deptid = this.parentId
        const res = await countWarningByTime(this.queryParam).finally(() => {
          this.loading = false
        })
        if (res.code == 0) {
          const arr = res.data.map((item) => {
            return {
              key: item.key,
              value: item.count,
              name: item.name
            }
          })
          const data = arr.filter((item) => item.key != 'gathering' && item.value != 0)
          this.warningData = data
          this.$nextTick(() => {
            this.initChart(data)
          })
        } else {
          this.warningData = []
        }
      } else {
        this.$message.error(res1.msg)
      }
    },
     // 递归查询当前节点的id和他的下级id
     recursionDeptid (result, id, treeData, isSave = false) {
        treeData.map(v => {
          if (v.id == id || isSave) {
            result.push(v.id)
            this.recursionDeptid(result, id, v.children, true)
            return
          }
          if (v.children && v.children.length > 0) {
            this.recursionDeptid(result, id, v.children)
          }
        })
      },
    initChart (data) {
      const myChart = echarts.init(document.getElementById('warnPieEcharts')) // 图标初始化
      myChart.setOption({
        series: [
          {
            type: 'pie',
            data: data,
            label: {
              color: '#000000',
              fontStyle: 'normal',
              fontWeight: 'lighter',
              fontFamily: 'MicrosoftYaHei',
              fontSize: 24,
              // padding: [23, -80],
              formatter: '{c|{c}}{a| 件}\n{b|{b}}',
              rich: {
                a: {
                  fontFamily: 'MicrosoftYaHei',
                  fontWeight: '400',
                  fontSize: 20,
                  color: '#bdbdbd',
                  lineHeight: 20
                },
                b: {
                  fontFamily: 'MicrosoftYaHei',
                  fontWeight: '400',
                  fontSize: 20,
                  color: '#bdbdbd',
                  lineHeight: 20
                },
                c: {
                  fontFamily: 'Myriad Pro',
                  fontWeight: '600',
                  fontSize: 20,
                  color: '#000000',
                  lineHeight: 20
                }
              }
            },
            radius: ['48%', '65%'],
            center: ['50%', '50%'],
            padAngle: -5,
            top: '15%',
            bottom: '5%',
            // itemStyle: {
            // 	borderRadius: 50
            // },
            color: ['#CF3730 ', '#FF9F00', '#3496FB', '#00B853']
          }
        ]
      })
    }
  }
}
</script>

<style  lang="less" scoped>
.title {
  display: flex;
  flex-direction: column;
  .title_top {
    padding-bottom: 16px;
    border-bottom: 3px solid #f5f5f5;
    display: flex;
    flex-direction: row;
    font-size: 23px;
    font-family: PingFang SC;
    font-weight: 800;
    color: #2c2c2c;
    justify-content: space-between;
  }
  .title_num {
    margin-top: 25px;
    display: flex;
    padding: 10px 10%;
    flex-direction: row;
    justify-content: space-between;
    background: #e7e7e7;
    .title_num_item {
      display: flex;
      flex-direction: column;
      .title_num_item_top {
        font-size: 34px;
        font-family: DIN;
        font-weight: bold;
        color: #0072c6;
        text-align: center;
      }
      .title_num_item_bottom {
        font-size: 20px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #2c2c2c;
        text-align: center;
      }
    }
  }
}
</style>
